<div class="mt-3">

        <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
    
            <button type="button" class="btn btn-primary" (click)="list.click($event)">
                <fa-icon class="relative-top-2px" [icon]="list.icon"></fa-icon>
                <span class="align-middle ml-1">{{list.nickname}}</span>
            </button>
    
            <button type="button" class="btn btn-primary" (click)="reList.click($event)">
                <fa-icon class="relative-top-1px" [icon]="reList.icon"></fa-icon>
            </button>
    
            <button type="button" class="btn btn-primary" (click)="add.click($event)">
                <fa-icon class="relative-top-2px" [icon]="add.icon"></fa-icon>
                <span class="align-middle ml-1">{{add.nickname}}</span>
            </button>
    
            <button type="button" class="btn btn-primary" (click)="delete.click($event)">
                <fa-icon class="relative-top-2px" [icon]="delete.icon"></fa-icon>
                <span class="align-middle ml-1">{{delete.nickname}}</span>
            </button>
    
            <button type="button" class="btn btn-primary" (click)="modify.click($event)">
                <fa-icon class="relative-top-2px" [icon]="modify.icon"></fa-icon>
                <span class="align-middle ml-1">{{modify.nickname}}</span>
            </button>
    
            <!--<div class="btn-group" dropdown>-->
                <!--<button dropdownToggle type="button" class="btn btn-primary dropdown-toggle" aria-controls="dropdown-basic">-->
                    <!--<fa-icon class="relative-top-2px" [icon]="audit.icon"></fa-icon>-->
                    <!--<span class="align-middle ml-1">{{audit.nickname}}</span>-->
                <!--</button>-->
                <!--<ul *dropdownMenu class="dropdown-menu"-->
                    <!--role="menu" aria-labelledby="button-basic">-->
                    <!--<li role="menuitem" (click)="audit.submit.click($event)"><a class="dropdown-item">-->
                        <!--<fa-icon class="relative-top-2px" [icon]="audit.submit.icon"></fa-icon>-->
                        <!--<span class="align-middle ml-1">{{audit.submit.nickname}}</span></a></li>-->
                    <!--<li role="menuitem" (click)="audit.audit.click($event)"><a class="dropdown-item">-->
                        <!--<fa-icon class="relative-top-2px" [icon]="audit.audit.icon"></fa-icon>-->
                        <!--<span class="align-middle ml-1">{{audit.audit.nickname}}</span></a></li>-->
                    <!--<li role="menuitem" (click)="audit.reject.click($event)"><a class="dropdown-item">-->
                        <!--<fa-icon class="relative-top-2px" [icon]="audit.reject.icon"></fa-icon>-->
                        <!--<span class="align-middle ml-1">{{audit.reject.nickname}}</span>-->
                    <!--</a></li>-->
                <!--</ul>-->
            <!--</div>-->
    
            <div class="btn-group" dropdown>
                <button dropdownToggle type="button" class="btn btn-primary dropdown-toggle" aria-controls="dropdown-basic">
                    <fa-icon class="relative-top-2px" [icon]="data.icon"></fa-icon>
                    <span class="align-middle ml-1">{{data.nickname}}</span>
                </button>
                <ul *dropdownMenu class="dropdown-menu"
                    role="menu" aria-labelledby="button-basic">
                    <li role="menuitem"><a class="dropdown-item">
                        <fa-icon class="relative-top-2px" [icon]="data.export.icon"></fa-icon>
                        <span class="align-middle ml-1">{{data.export.nickname}}</span></a></li>
                    <li role="menuitem"><a class="dropdown-item">
                        <fa-icon class="relative-top-2px" [icon]="data.import.icon"></fa-icon>
                        <span class="align-middle ml-1">{{data.import.nickname}}</span></a></li>
                </ul>
            </div>
            <div class="btn-group" dropdown>
                <button dropdownToggle type="button" class="btn btn-primary dropdown-toggle" aria-controls="dropdown-basic">
                    <fa-icon class="relative-top-2px" [icon]="report.icon"></fa-icon>
                    <span class="align-middle ml-1">{{report.nickname}}</span>
                </button>
                <ul *dropdownMenu class="dropdown-menu"
                    role="menu" aria-labelledby="button-basic">
                    <li role="menuitem" (click)="report.chartLine.click($event)"><a class="dropdown-item">
                        <fa-icon class="relative-top-2px" [icon]="report.chartLine.icon"></fa-icon>
                        <span class="align-middle ml-1">{{report.chartLine.nickname}}</span></a></li>
                    <li role="menuitem" (click)="report.chartArea.click($event)"><a class="dropdown-item">
                        <fa-icon class="relative-top-2px" [icon]="report.chartArea.icon"></fa-icon>
                        <span class="align-middle ml-1">{{report.chartArea.nickname}}</span></a></li>
                    <li role="menuitem" (click)="report.chartPie.click($event)"><a class="dropdown-item">
                        <fa-icon class="relative-top-2px" [icon]="report.chartPie.icon"></fa-icon>
                        <span class="align-middle ml-1">{{report.chartPie.nickname}}</span></a></li>
                </ul>
            </div>
            <button type="button" class="btn btn-primary" (click)="help.click($event)">
                <fa-icon class="relative-top-1px" [icon]="help.icon"></fa-icon>
            </button>
    
        </div>
    
    </div>
    